<template>
	<view>
		<view class="example-body message">
			<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">底部弹出</text></button>
		</view>
		<uni-popup ref="popup" :type="type" :animation="false" >
			<view class="popup-content uni-flex uni-column" style="-webkit-justify-content: center;justify-content: center;">
				<text style="font-size: 36rpx;text-align: center;padding: 24rpx 0 ; border-bottom:1rpx solid #efc679 ;border-color: #efc679;">支持 XXX</text>
				<text style="text-align: center;padding: 30rpx 30rpx 10rpx 30rpx; color:#efc679 ">请选择能量</text>
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: space-between;">
					<view class="text uni-flex uni-column" v-for="(item,index) in powerList" :key="index">
						<!-- <view class="tag-view"> -->
							<!-- <uni-tag :circle="false" :inverted="item.inverted" :text="item.power" type="primary" @click="setInverted(item,index)" /> -->
							<button type="default" plain="true" :class="{'buttonSelected':item.selected}" style="font-weight:bold;color: #CDAA68;border-color:#CDAA68;"
							 @click="selectButton(item,index)">{{item.power}}</button>
						<!-- </view> -->
						<text style="font-size: 28rpx;line-height: 32rpx;margin-top:8rpx;color:#CDAA68">{{item.money==0? '免费':'¥'+item.money}}</text>
					</view>
				</view>
				<text style="text-align: center;padding: 30rpx 30rpx 10rpx 30rpx;color:#efc679">请选择能量数量</text>
				<uni-number-box style="width: 400rpx;margin: auto;padding-bottom: 60rpx;" :min="1" :max="99" :value="numberValue"
				 @change="numChange" />
				<button type="primary" style="background-color: #CDAA68;margin-top: 24rpx;width: 600rpx;" @click="submitPower">投能量</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'bottom',
				numberValue: 1,
				selectMoney: 0,
				selectPower: 0,
				powerList: [{
						money: 0,
						power: 1,
						selected: false
					},
					{
						money: 5,
						power: 50,
						selected: false
					},
					{
						money: 20,
						power: 200,
						selected: false
					},
					{
						money: 50,
						power: 500,
						selected: false
					},
					{
						money: 100,
						power: 1000,
						selected: false
					}
				],

			}
		},
		methods: {
			/**
			 * 打开弹窗内容
			 */
			toggle(type) {
				this.type = type
				this.$refs.popup.open()
			},
			numChange(value) {
				if (value <= 99 && value >= 1) {
					this.numberValue = value;
				}
				if (value > 99) {
					this.numberValue = 99;
				}
				if (value < 1) {
					this.numberValue = 1;
				}
			},
			selectButton(item, index) {
				this.powerList.forEach((it,i) => {
					if(i!=index){
						it.selected = false;
					}
				})
				this.powerList[index].selected = !this.powerList[index].selected;
				if (this.powerList[index].selected) {
					this.selectMoney = this.powerList[index].money;
					this.selectPower = this.powerList[index].power;
				}else{
					this.selectMoney = 0;
					this.selectPower = 0;
				}
			},
			submitPower(){
				console.log("this.selectMoney===",this.selectMoney)
				console.log("this.selectPower===",this.selectPower)
				console.log("this.numberValue===",this.numberValue)
				
			}
		}
	}
</script>

<style scoped>
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5px 15px;
	}


	.popup-content {
		background-color: #fff;
		padding: 32rpx 16rpx;
	}

	.message {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 15px 0;
	}

	.text {
		margin: 15rpx 10rpx;
		/* height: 100rpx; */
		/* line-height: 100rpx; */
		text-align: center;
		color: #777;
		/* font-size: 40rpx; */
		/* border: 1px solid #d4c513; */
		/* border-radius: 8rpx; */
		/* width: 100rpx; */
	}

	.tag-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin: 10rpx 15rpx;
		justify-content: center;

	}

	/deep/ .uni-tag {
		padding: 0 24rpx;
		border: 1rpx solid #CDAA68;
	}

	/deep/ .uni-tag-text {
		font-size: 36rpx;
		font-weight: bolder;
	}

	/deep/ .uni-tag-text--primary {
		color: #CDAA68 !important;
	}

	/deep/ .primary-uni-tag--inverted {
		background-color: #CDAA68 !important;
	}

	/deep/ .uni-numbox__minus {
		background-color: #CDAA68;
		width: 90rpx;
		/* height: 100rpx; */
		border: 1rpx solid #CDAA68;
	}

	/deep/ .uni-numbox__plus {
		background-color: #CDAA68;
		width: 90rpx;
		/* height: 100rpx; */
		border: 1rpx solid #CDAA68;
	}

	/deep/ .uni-numbox__value {
		width: 250rpx;
		border: 1rpx solid #CDAA68;
	}

	.buttonSelected {
		background-color: #CDAA68 !important;
		color: #FFFFFF !important;
		
	}
</style>
